<template>
  <div class="getpassword-content">
    <back-bar title="忘记密码" @toBack="toBack" />
    <div class="change-pwd-box">
      <div class="title">忘记密码</div>
      <div class="pwd-inp-box">
        <input type="text" placeholder="用户名" v-model="upDataInfo.userName" />
        <input type="number" placeholder="证件号" v-model="upDataInfo.idNumber" />
        <input type="text" placeholder="真实姓名" v-model="upDataInfo.realName" />
        <input type="password" placeholder="新密码" v-model="upDataInfo.password" />
        <input type="password" placeholder="确认密码" v-model="checkPwd" />
      </div>
      <button @click="toUpdataPassword">确定</button>
    </div>
    <select-popup
      title="您确定修改吗"
      :showSelectPopup="showSelectPopup"
      @handleCancel="handleCancel"
      @handleAffirm="handleAffirm"
      @handleClickOverlay="handleClickOverlay"
    />
  </div>
</template>

<script>
import BackBar from "@/components/conten/backbar/BackBar";
import SelectPopup from "components/common/selectpopup/SelectPopup";

import { forgetPassword } from "network/login";

import { isEmpty } from "common/utils";

export default {
  name: "getpassword",
  components: {
    BackBar,
    SelectPopup,
  },
  data() {
    return {
      checkPwd: "",
      showSelectPopup: false,
      upDataInfo: {
        password: "",
        userName: "",
        realName: "",
        idNumber: "",
      },
    };
  },
  methods: {
    toBack() {
      this.$router.back();
    },
    toUpdataPassword() {
      this.showSelectPopup = true;
    },
    handleCancel() {
      this.showSelectPopup = false;
    },
    handleAffirm() {
      let { password, userName, realName, idNumber } = this.upDataInfo;
      if (isEmpty(password, userName, realName, idNumber)) {
        this.$toast({
          message: "设置项不能为空",
          position: "bottom",
        });
        this.showSelectPopup = false;
      } else if (password != this.checkPwd) {
        this.$toast({
          message: "两次密码输入不同",
          position: "bottom",
        });
        this.showSelectPopup = false;
      } else {
        this.showSelectPopup = false;
        forgetPassword(this.upDataInfo).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$toast({
              message: "修改成功",
              position: "bottom",
            });
            this.$router.back();
          } else {
            this.$toast({
              message: "信息错误",
              position: "bottom",
            });
          }
        });
      }
    },
    handleClickOverlay() {
      this.showSelectPopup = !this.showSelectPopup;
    },
  },
};
</script>

<style scoped>
.getpassword-content {
  padding-top: 50px;
}
.change-pwd-box {
  margin: 40px 50px;
}
.change-pwd-box .title {
  font-size: 25px;
  margin-bottom: 30px;
}
.pwd-inp-box input {
  height: 40px;
  width: 260px;
  margin-bottom: 10px;
  border: none;
  border-bottom: 1px solid #ccc;
  text-indent: 5px;
  font-size: 14px;
}
.change-pwd-box button {
  height: 35px;
  width: 260px;
  margin-top: 20px;
  background-color: #ff5654;
  border: none;
  outline: none;
  color: #fff;
  border-radius: 5px;
}
</style>